<template>
    <div>
        <el-card class="el-card">
            <el-form :inline="true"  class="demo-form-inline">
                <el-form-item label="员工名称搜索：">
                  <el-input placeholder="输入员工名称" clearable />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                  <el-button type="primary" @click="getAdd">新增员工</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="el-card">
            <el-table :data="UserArr" border style="width: 100%">
                <el-table-column prop="name" label="员工姓名" width="180" />
                <el-table-column prop="mobile" label="员工手机号" width="180" />
                <el-table-column prop="account" label="工号" />
                <el-table-column  label="操作" >
                    <template #="{row}">
                        <el-button type="primary" @click="editpermission(row)">编辑</el-button>  
                        <el-button type="danger" @click="deletepermission(row)">禁用</el-button>          
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 新增对话框 -->
        <el-dialog
          v-model="DialogVisible"
          title="添加员工"
          width="30%"
          align-center
        >
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="formUser"
          style="max-width: 460px"
        >
        <el-form-item label="账号">
          <el-input v-model="formUser.account" />
        </el-form-item>
        <el-form-item label="员工姓名">
          <el-input v-model="formUser.name" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formUser.mobile" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="formUser.sex">
            <el-radio label="男" value='1'/>
            <el-radio label="女" value='2'/>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="formUser.idCard" />
        </el-form-item>
        </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="DialogVisible = false">Cancel</el-button>
              <el-button type="primary" @click="AddUser">
                Confirm
              </el-button>
            </span>
          </template>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import {reqUserList,reqUserAdd,reqUserEdit} from '@/api/order/index'
// 获取列表数据字段
let UserArr = ref<any>([])
// 收集新增数据字段
let formUser = reactive({
  account:'',
  name:'',
  mobile:'',
  sex:'',
  idCard:''
})
let DialogVisible =ref(false)

const getAdd = ()=>{
  DialogVisible.value = true
}
// 获取列表
// const GetUserList()=>{
//   let result = reqUserList()
//   UserArr.value = result.data
// }

// 新增
const AddUser =()=>{
  console.log(formUser);
  reqUserAdd(formUser) 
}
// 编辑
const editUser =(row)=>{
  reqUserEdit(formUser)
}

onMounted();
</script>

<style scoped>

</style>